<template>
  <div class="main">
    <h2 class="weekend-title">周末去哪儿</h2>
    <div v-for="item of weekendList" :key="item.id" class="item">
      <a :href="item.href" class="item-a">
        <img class="item-img" :src="item.imgUrl">
        <div class="item-content">
          <p class="item-content-title">{{item.title}}</p>
          <p class="item-content-desc">{{item.desc}}</p>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  name: 'weekend',
  props: ['weekendList']
}
</script>
<style lang='stylus' scoped>
.main
  background-color #eeeeee
  height auto
  .weekend-title
    height .8rem
    padding-left .26rem
    line-height .8rem
    color #212121
    background-color #eeeeee
  .item
    position relative
    background-color #ffffff
    margin-bottom .2rem
    a
      .item-img
        width 100%
      .item-content
        position relative
        padding .14rem .2rem .2rem .2rem
        .item-content-title
          overflow: hidden;
          padding-right: 1.4rem;
          color: #212121;
          font-size: .28rem;
          line-height: .48rem;
          white-space: nowrap;
          text-overflow: ellipsis;
        .item-content-desc
          overflow: hidden;
          padding-right: 1.4rem;
          color: #616161;
          font-size: .24rem;
          line-height: .42rem;
          white-space: nowrap;
          text-overflow: ellipsis;

</style>
